<template>
  <div>
   <Loading v-if="loading" />
   <h3 v-else>{{ title }}</h3>
   <BookList :list = "books" v-if="books.length" />
   <h1>{{ message }}</h1>
   <el-pagination
    :hide-on-single-page="true"
    @size-change="handleSizeChange"
    :page-sizes="[2,10,20,40]"
    @current-change="handleCurrentChange"
    :current-page="pageNum"
    :page-size="pageSize"
    layout="total,sizes,prev,pager,next,jumper"
    :total="total">
    </el-pagination>
  </div>
</template>

<script>
import BookList from "@/components/BookList"
import Loading from "@/components/Loading.vue"
export default {
  name: 'Books', 
  data(){
    return{
      title:'',
      books:[],
      message:'',
      loading:true,
      //page
      total:5,
      pageNum:1,
      pageSize:2
    }
  },
  beforeRouteEnter(to,from,next){
    next(vm=>{
      vm.title = to.meta.title;
      let url = vm.setRequestUrl(to.fullPath);
      // vm.getBooks(url);
      vm.getBooks(url,vm.pageNum,vm.pageSize)
    })
  },
  beforeRouteUpdate(to){
    let url = this.setRequestUrl(to.fullPath);
    // this.getBooks(url);
    this.getBooks(url,this.pageNum,this.pageSize);
    return true;
  },
  components:{
    BookList,
    Loading,
  },
  methods:{
    getBooks(url,pageNum,pageSize){
      this.message = '',
      this.axios.get(url,{params:{pageNum,pageSize}})
      .then(res=>{
        if(res.data.code==200){
          this.loading = false;
          this.books = res.data.data;
          this.total = res.data.total;
          if(this.books.length===0){
            if(this.$route.name === 'category'){
              this.message = "当前分类下没有图书"
            }else{
              this.message = "没有搜索到匹配的图书"
            }
          }
        }
      })
      .catch(error=>alert(error));
    },
    setRequestUrl(path){
      let url = path;
      if(path.indexOf("/category") !== -1){
        url = "/book" + url + "/page";
      }
      return url;
    },
    handleSizeChange(selectedSize){
      this.pageSize = selectedSize;
      let url = this.setRequestUrl(this.$route.fullPath);
      this.getBooks(url,this.pageNum,this.pageSize);
    },
    handleCurrentChange(currentPage){
      this.pageNum = currentPage;
      let url = this.setRequestUrl(this.$route.fullPath);
      this.getBooks(url,this.pageNum,this.pageSize);
    },
  }
}
</script>
<style scoped>

</style>